<!-- 商家中心 -->
<template>
    <view class="merchant-wrap">
        <view class="nav-item">
            <view class="nav-left" style="background-image: url('../static/hx-bg.png')">
                <text class="nav-text">输码核销</text>
                <view class="nav-number" @click="showInput">
                    <image src="../static/hx-bj.png" mode=""></image>
                    <text class="text">输码</text>
                </view>
            </view>
            <view
                class="nav-right"
                @tap="scanCode"
                style="background-image: url('../static/hx-bg3.png')"
            >
                <text class="nav-text">扫码核销</text>
                <view class="nav-code">
                    <image src="../static/hx-sm.png" mode=""></image>
                    <text class="text">扫码</text>
                </view>
            </view>
        </view>
<!--        <view class="cancel">
            <view class="cancel-box">
                <select name="今日" id="">
                    <option value="今日">今日</option>
                </select>
                <select name="全部" id="">
                    <option value="全部">全部</option>
                </select>
            </view>
            <view class="cancel-box">
                <text class="box">订单量(单)：0</text>
                <text class="box">交易额(元)：0</text>
            </view>
        </view> -->
        <!-- 输码弹窗 -->
        <u-popup
            v-model="showInputModal"
            mode="center"
            :closeable="true"
            close-icon-pos="top-left" 
            border-radius="20"
        >
            <view class="modal-box u-flex-col u-col-center">
                <view class="modal-head u-flex-col u-col-center">
                    <image class="modal-head-img" src="" mode=""></image>
                    <text class="modal-head-title">输码核销</text>
                </view>
                <input
                    class="inp"
                    type="number"
                    v-model="qrcode"
                    placeholder="在此输入核销码"
                    placeholder-class="pl-inp"
                />
                <button class="u-reset-button post-btn" @tap="onConfirm">核销</button>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            scanCodes: "", //扫码内容。
            showInputModal: false, //输码核销
            qrcode: "", //输码
        };
    },
    computed: {},
    onLoad(options) {},
    onShow() {},
    methods: {
        // 输码
        onConfirm() {
            this.showInputModal = false;
            this.scanCodes = this.qrcode;
        },
        //核销码
        showInput() {
            console.log("输码");
			//打开输入码弹窗
        },
        // 扫码
        scanCode() {
            console.log("扫码");
        },
    },
};
</script>

<style lang="scss" scoped>
.merchant-wrap {
    background-color: #f7f7f7;
    .title {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #fff;
        image {
            width: 30rpx;
            height: 30rpx;
        }
    }
    .merchant-box {
        width: 100%;
        height: 300rpx;
        background-size: 100% 100%;
        .user-head {
            .shop-info {
                .shop-title {
                    color: #fff;
                    font-weight: bold;
                    font-size: 30rpx;
                    margin-left: 30rpx;
                }
                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 10rpx;
                }
            }
        }
    }
    .merchant-btn {
        padding: 0;
        width: 136rpx;
        line-height: 46rpx;
        background: rgba(255, 255, 255, 1);
        border-radius: 23rpx 0px 0px 23rpx;
        font-size: 20rpx;
        position: absolute;
        right: 0;
        top: 150rpx;
        font-weight: 500;
        color: #4cb89d;
    }
    .nav-item {
        margin: 30rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .nav-left,
        .nav-right {
			margin-top: 200rpx;
            padding: 36rpx 20rpx;
            width: 42%;
            background-size: 100% 100%;
            .nav-text {
                font-size: 28rpx;
                font-weight: bold;
                color: #fff;
            }
            .nav-code {
                background-color: #fff;
                border-radius: 50rpx;
                color: #2ea4f9;
                width: 50%;
                font-size: 24rpx;
                margin-top: 16rpx;
                display: flex;
                align-items: center;
                image {
                    margin: 0 10rpx;
                    width: 30rpx;
                    height: 30rpx;
                }
            }
            .nav-number {
                background-color: #fff;
                border-radius: 50rpx;
                color: #56bca2;
                width: 50%;
                font-size: 24rpx;
                margin-top: 16rpx;
                display: flex;
                align-items: center;
                image {
                    margin: 0 10rpx;
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
    }
    .cancel {
        .cancel-box {
            padding: 20rpx 0;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 28rpx;
            color: #666;
            .box {
                color: #4cb89d;
                background-color: #f4fbf9;
                border: 1px solid #d6eee8;
                padding: 16rpx 46rpx;
                margin-top: 20rpx;
                font-size: 24rpx;
                border-radius: 10rpx;
            }
        }
    }
    .hx-content {
        .hx-item {
            background-color: #fff;
            padding: 20rpx;
            margin: 20rpx;
            border-radius: 10rpx;
            .item-top {
                color: #ccc;
                font-size: 20rpx;
            }
            .item-cont {
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #ccc;
                .cont-left {
                    width: 200rpx;
                    height: 200rpx;
                }
                .cont-right {
                    margin-left: 20rpx;
                    .name {
                        display: block;
                        font-size: 28rpx;
                    }
                    .num {
                        font-size: 24rpx;
                        color: #ccc;
                    }
                }
            }
            .item-bottom {
                padding-top: 10rpx;
                font-size: 24rpx;
                color: #ccc;
                text-align: right;
            }
        }
    }
    .hx-content1 {
        position: absolute;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%);
        image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
        }
    }
}
</style>
